<script lang="ts" setup>
import { 
    SearchOutlined, 
    RedoOutlined,
    UploadOutlined, 
    DownloadOutlined,
    EditOutlined,
    EyeOutlined,
    DeleteOutlined
} from '@ant-design/icons-vue';
import { ref } from 'vue';
import { mock } from 'mockjs';

const loading = ref<boolean>(false);
const tableData = ref([]);
const selectedRowKeys = ref([]);
// 病案号、登记号、就诊ID、患者唯一号、医嘱大类名称、药品名称、规格、医嘱开始时间、医嘱结束时间、用法、通用名、药品分类（1级）、药品分类（2级）、药品分类（3级）、药品分类（4级）
const columns = [
    {
        title: '登记号',
        dataIndex: 'registrationNumber',
        key: 'registrationNumber',
        align: 'center'
    },
    {
        title: '病案号',
        dataIndex: 'caseNumber',
        key: 'caseNumber',
        align: 'center'
    },
    {
        title: '就诊ID',
        dataIndex: 'visitId',
        key: 'visitId',
        align: 'center'
    },
    {
        title: '患者唯一号',
        dataIndex: 'patientUniqueId',
        key: 'patientUniqueId',
        align: 'center'
    },
    {
        title: '医嘱大类名称',
        dataIndex: 'orderCategoryName',
        key: 'orderCategoryName',
        align: 'center'
    },
    {
        title: '药品名称',
        dataIndex: 'medicineName',
        key: 'medicineName',
        align: 'center'
    },
    {
        title: '规格',
        dataIndex: 'specification',
        key: 'specification',
        align: 'center'
    },
    {
        title: '医嘱开始时间',
        dataIndex: 'orderStartTime',
        key: 'orderStartTime',
        align: 'center'
    },
    {
        title: '医嘱结束时间',
        dataIndex: 'orderEndTime',
        key: 'orderEndTime',
        align: 'center'
    },
    {
        title: '用法',
        dataIndex: 'usage',
        key: 'usage',
        align: 'center'
    },
    {
        title: '通用名',
        dataIndex: 'genericName',
        key: 'genericName',
        align: 'center'
    },
    {
        title: '药品分类（1级）',
        dataIndex: 'medicineCategory1',
        key: 'medicineCategory1',
        align: 'center'
    },
    {
        title: '药品分类（2级）',
        dataIndex: 'medicineCategory2',
        key: 'medicineCategory2',
        align: 'center'
    },
    {
        title: '药品分类（3级）',
        dataIndex: 'medicineCategory3',
        key: 'medicineCategory3',
        align: 'center'
    },
    {
        title: '药品分类（4级）',
        dataIndex: 'medicineCategory4',
        key: 'medicineCategory4',
        align: 'center'
    },
];

const generateMockData = () => {
    return mock({
        'data|10-20': [
            {
                registrationNumber: '@id',
                caseNumber: '@id',
                visitId: '@id',
                patientUniqueId: '@id',
                orderCategoryName: '@word',
                medicineName: '@word',
                specification: '@word',
                orderStartTime: '@datetime',
                orderEndTime: '@datetime',
                usage: '@word',
                genericName: '@word',
                medicineCategory1: '@word',
                medicineCategory2: '@word',
                medicineCategory3: '@word',
                medicineCategory4: '@word',
            }
        ]
    }).data;
};

tableData.value = generateMockData();

</script>

<template>
    <div>
        <a-card title="检索" size="small">
            <a-form layout="inline">
                <a-form-item label="登记号">
                    <a-input placeholder="请输入登记号" :disabled="loading" />
                </a-form-item>
                <a-form-item label="病案号">
                    <a-input placeholder="请输入病案号" :disabled="loading" />
                </a-form-item>
                <a-form-item label="就诊ID">
                    <a-input placeholder="请输入就诊ID" :disabled="loading" />
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" :loading="loading">
                            <template #icon>
                                <SearchOutlined />
                            </template>
                            检索
                        </a-button>
                        <a-button :loading="loading">
                            <template #icon>
                                <RedoOutlined />
                            </template>
                            重置
                        </a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </a-card>
        <a-card title="列表" size="small" style="margin-top: 14px">
            <a-table 
                rowKey="id" 
                size="middle" 
                :bordered="false" 
                :loading="loading" 
                :columns="columns"
                :data-source="tableData" :scroll="{ x: 'max-content' }"
                :row-class-name="(_record: any, index: number) => (index % 2 === 1 ? 'table-striped' : null)"
            >
                <template #title>
                    <a-space>
                        <a-button type="primary">
                            <template #icon><UploadOutlined /></template>
                            导入药品数据
                        </a-button>
                        <a-button>
                            <template #icon><DownloadOutlined /></template>
                            导出药品数据
                        </a-button>
                        <a-button type="primary" danger ghost :disabled="selectedRowKeys.length === 0">
                            <template #icon><DeleteOutlined /></template>
                            批量删除
                        </a-button>
                    </a-space>
                </template>
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'actions'">
                        <a-space>
                            <a-button size="small" type="primary" ghost>
                                <template #icon><EditOutlined /></template>
                                编辑
                            </a-button>
                            <a-button size="small" type="primary" danger ghost>
                                <template #icon><DeleteOutlined /></template>
                                删除
                            </a-button>
                            <a-button size="small">
                                <template #icon><EyeOutlined /></template>
                                查看
                            </a-button>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<style lang="less" scoped>
.page-name {
    font-size: 20px;
    color: #333;
    font-weight: bold;
}

:deep(.table-striped) {
    background-color: @second-bg-color;
}
</style>